<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row>
          <el-col type="flex" :span="6">
            <el-button type="primary" @click="addform">新增员工</el-button>
          </el-col>
          <el-col type="flex" :span="14">
            <el-input type="text" autocomplete="off" placeholder="请输入需要查询的内容" />
          </el-col>
          <el-col type="flex" :span="2">
            <el-button>筛选</el-button>
          </el-col>
        </el-row>
        <el-table border :data="formAlldata">
          <el-table-column label="序号" sortable="">
            <template v-slot="{$index}">{{ $index+1 }}</template>
          </el-table-column>
          <el-table-column prop="image" label="头像" width="120px">
            <template v-slot="{row}">
              <img

                :src="row.image"
                alt=""
                width="100px"
              >
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" sortable="" />
          <el-table-column prop="email" label="邮箱" sortable="" />
          <!-- <el-table-column prop="proVider" label="供应商" sortable="" /> -->
          <!-- <el-table-column prop="formOfEmployment" label="聘用形式" sortable="">
            <template v-slot="{row}">{{ row.formOfEmployment===1?'正式':'非正式' }}</template>
          </el-table-column> -->
          <el-table-column prop="created_at" label="入职时间" sortable="" />
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="removeFn(row.id)">删除</el-button>
              <el-button type="text" size="small" @click="compile(row.id)">编辑</el-button>
              <el-button type="text" size="small" @click="setrole(row.id)">设置角色</el-button>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :page-size="limit"
            :pager-count="11"
            layout="prev, pager, next"
            :total="total"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
    </div>
    <Add ref="formdatalist" :dialog-visible.sync="isshow" @Automatic="getalldataform" />
    <!-- 设置角色模块 -->
    <el-dialog title="分配角色" :visible="dialogVisible" @close="closefn">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in rloelist" :key="item.id" :label="item.id">{{ item.title }}</el-checkbox>
      </el-checkbox-group>
      <!-- el-checkbox-group选中的是 当前用户所拥有的角色  需要绑定 当前用户拥有的角色-->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="suerset">确定</el-button>
          <el-button size="small" @click="closefn">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import Add from './comments/addrole.vue'
import { getallrloedata, getallnumber, removeformdata, getassignformdata, getallrole, alterformdata } from '@/api/employee'
export default {
  components: {
    Add
  },
  data() {
    return {
      formAlldata: [],
      limit: 10,
      start: 0,
      total: 0,
      isshow: false,
      imputdata: '',
      checkList: [],
      dialogVisible: false,
      rloelist: [],
      IsId: ''
    }
  },
  async created() {
    this.getalldataform()
  },
  methods: {
    async   getalldataform() {
      const res = await getallrloedata({ _limit: this.limit, _start: this.start })
      // console.log(res.data)
      // console.log(res)
      // 时间处理
      // res.data.forEach(item => {
      //   item.created_at.split('T')[0]
      // })
      const res1 = await getallnumber()
      this.total = res1.data
      this.formAlldata = res.data
    },
    // 分页器
    changePage(newPage) {
      console.log(newPage)
      this.start = this.start = newPage === 1 ? 0 : (newPage - 1) * this.limit
      this.getalldataform()
    },
    addform() {
      this.isshow = true
    },
    async  removeFn(id) {
      await removeformdata(id)
      this.getalldataform()
    },
    // 修改内容
    async  compile(id) {
      this.isshow = true
      console.log(this.$refs.formdatalist)
      const res = await getassignformdata(id)
      // console.log(res)
      this.$refs.formdatalist.formlist = res.data
    },
    // 设置角色权限
    async setrole(id) {
      this.dialogVisible = true
      this.IsId = id
      // console.log(id)
      const res1 = await getassignformdata(id)
      console.log(res1)
      res1.data.roles.forEach(item => {
        this.checkList.push(item.id)
      })
      const res = await getallrole()
      this.rloelist = res.data
    },
    async suerset() {
      // console.log(this.checkList)
      const res = await alterformdata({ id: this.IsId, roles: this.checkList })
      console.log(res)
      this.dialogVisible = false
    },
    closefn() {
      this.checkList = []
      this.dialogVisible = false
    }
  }
}
</script>

<style>
</style>
